<template>
	<!-- 时间选择的组件 -->
	<view class="placeOrderTime">
		<!-- #ifdef H5 -->
			<!-- 预约日期 -->
			<u-datetime-picker mode="date" :show="dateShow" :closeOnClickOverlay="true" :formatter="formatter"
				:minDate="minDate" :maxDate="maxDate" :itemHeight="120" :visibleItemCount="5" @close="closeDate"
				@confirm="handleSubscribeStartTime" @cancel="closeDate">
			</u-datetime-picker>


			<!-- 预约时间 -->
			<u-datetime-picker mode="time" :show="timeShow" :closeOnClickOverlay="true" :formatter="formatter"
				:itemHeight="120" :visibleItemCount="5" @close="closeTime" @confirm="handleSubscribeStartTime"
				@cancel="closeTime">
			</u-datetime-picker>
		<!-- #endif -->


		<!-- #ifdef MP-WEIXIN -->
			<!-- 预约日期 -->
			<u-datetime-picker mode="date" :show="dateShow" :closeOnClickOverlay="true" :formatter="formatter"
				:minDate="minDate" :maxDate="maxDate" :itemHeight="68" :visibleItemCount="10" @close="closeDate"
				@confirm="handleSubscribeStartTime" @cancel="closeDate">
			</u-datetime-picker>


			<!-- 预约时间 -->
			<u-datetime-picker mode="time" :show="timeShow" :closeOnClickOverlay="true" :formatter="formatter"
				:itemHeight="68" :visibleItemCount="10" @close="closeTime" @confirm="handleSubscribeStartTime"
				@cancel="closeTime">
			</u-datetime-picker>
		<!-- #endif -->

	</view>
</template>

<script>
	export default {
		props: {
			// 时间选择显示
			dateShow: {
				type: Boolean,
				default: false
			},

			// 时分选择显示
			timeShow: {
				type: Boolean,
				default: false,
			},

			//父组件传入的数据
			pageData: {
				type: Object,
				default: () => {}
			},

			// 修改date的显示隐藏
			setDateShow: {
				type: Function,
				default: () => {},
			},

			// 修改time的显示隐藏
			setTimeShow: {
				type: Function,
				default: () => {},
			},

			// 设置时间值
			setTimeData: {
				type: Function,
				default: () => {},
			}



		},
		data() {
			return {
				startTime: [0, 1], // 服务开始时间
				endTime: [0, 1], // 服务结束时间


				// 日期相关
				minDate: 0, // 可选最小时间 时间戳毫秒
				maxDate: 0, // 可选最大时间 时间戳毫秒


				datePickerData: '', //预约日期选择数据
				timePickerData: '', // 预约时间选择数据

				currentTime: '', // 当前时间

				dateData: "", // 选择的日期
				timeData: '00:00', // 选择的时分

				dateStatus: false, // 判断是否跨天

				selectDate: '', // 选择的时间，最终数据

				pageData2: {}, // 页面的数据
			};
		},
		created() {},
		methods: {
			/**
			 * 关闭时间
			 */
			closeDate() {
				this.$emit('setDateShow')
			},

			/**
			 * 关闭时分
			 */
			closeTime() {
				this.$emit('setTimeShow')
			},

			/**
			 * @param {Object} type
			 * @param {Object} value
			 * 格式化日期和时间选择器
			 */
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},

			/**
			 * 提示框
			 **/
			showToast(val = 'none') {
				uni.showToast({
					title: '请选择服务时间内,比结束时间提前两小时',
					duration: 2000,
					icon: val
				});
			},

			/**
			 * 初始化
			 */
			init() {

				let time = new Date() // 当前时间
				// 打个锚点
				// time = new Date('2023-10-17 22:40:00')

				this.currentTime = this.timeInit(time) // 当前时间

				this.serveStartOfEnd() // 格式化开始和结束时间

				this.setDateBetween() // 设置日期范围

				// 是否跨天
				this.dateStatus = (this.startTime[0] * 60 + this.startTime[1]) > (this.endTime[0] * 60 + this.endTime[1])

				// 初始化日期
				this.handleSubscribeStartTime({
					mode: 'date',
					value: time.getTime()
				})
			},

			/**
			 * 处理开始时间和结束时间
			 */
			serveStartOfEnd() {
				// 初始化服务开始时间和结束时间

				let start = this.pageData2.serviceStartTime
				let end = this.pageData2.serviceEndTime

				// 打个锚点
				// start = "8:00:00"
				// end = "1:00:00"

				// 服务开始时间
				if (start) {
					this.startTime = start.split(":").map(res => {
						return Number(res);
					})
				} else {
					this.startTime = [0, 1, 0]
				}

				// 服务结束时间
				if (end) {
					this.endTime = end.split(":").map(res => {
						return Number(res);
					})
				} else {
					this.endTime = [0, 1, 0]
				}
			},


			/**
			 * 设置时分范围
			 * hour, // 时
				minute, //分
				minHour, // 最小时
				maxHour, // 最大时
				minMinute, // 最小分
				maxMinute, // 最大分
			 */
			setTime(val) {
				this.timeData = `${val[0]<10?'0'+val[0]:val[0]}:${val[1]<10?'0'+val[1]:val[1]}`

				this.timeData2 = `${val[0]<10?'0'+val[0]:val[0]}:${val[1]<10?'0'+val[1]:val[1]}`
			},

			setTime2(val) {
				this.timeData2 = `${val[0]<10?'0'+val[0]:val[0]}:${val[1]<10?'0'+val[1]:val[1]}`
			},


			/**
			 * 设置日期显示范围
			 */
			setDateBetween() {
				let time = new Date()
				// 设置日期最小日期为当前日期
				this.minDate = time.getTime()

				// 设置日期最大日期，增加3个月
				this.maxDate = time.setMonth(time.getMonth() + 1)
			},


			/**
			 * 最新的切换时间
			 */
			handleSubscribeStartTime(e) {

				// 将时间选择器都关掉
				this.$emit('setDateShow')
				this.$emit('setTimeShow')
				// 切换日期
				if (e.mode === 'date') {
					this.dateSwitch(e.value) // 切换日期
				}

				// 切换时分
				if (e.mode === 'time') {
					this.timeSwitch(e.value) // 切换时间
				}


				this.submit() // 提交值
			},

			/**
			 * 初始化时间
			 * fullYear:年
			 * moth:月
			 * day:日
			 * hours: 时
			 * minutes:分
			 */
			timeInit(val) {
				return {
					fullYear: val.getFullYear(), // 年
					moth: val.getMonth() + 1, // 月
					day: val.getDate(), // 日
					hours: val.getHours(), // 时
					minutes: val.getMinutes(), // 分
				}
			},


			/**
			 * @param {Object} val
			 * 时间拼接，只是为了查看值对不对
			 */
			timeJoint(val) {
				return val.fullYear + '-' + val.moth + "-" + val.day + " " + val.hours + ":" + val.minutes
			},




			/**
			 * @param {Object} val
			 * 时间转换
			 */
			timeCycle(val) {
				let date = new Date(val)
				return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
			},



			/**
			 * 切换日期，更改可选时间区间
			 */
			dateSwitch(val) {

				// 日期赋值
				this.dateData = this.timeCycle(val)

				// 根据当前时间，赋值默认的预约时间
				this.changeTimeSection(val)
			},


			/**
			 * 根据当前时间，赋值默认的预约时间
			 */
			changeTimeSection(val) {

				let date = this.timeInit(new Date(val)) // 输入时间

				/**
				 * 日期+1天
				 */
				const dayEdit = () => {
					this.dateData = this.timeCycle(new Date(val).setDate(new Date(val).getDate() + 1))
					this.minDate = new Date(val).setDate(new Date(val).getDate() + 1)
				}

				/**
				 * 当前时间
				 */
				let time1 = (this.currentTime.hours * 60 + this.currentTime.minutes + 120)

				/**
				 * 开始时间
				 */
				let start1 = (this.startTime[0] * 60 + this.startTime[1])

				/**
				 * 结束时间
				 */
				let end1 = (this.endTime[0] * 60 + this.endTime[1])

				// 判断选择日期是否是今天
				if (date.fullYear === this.currentTime.fullYear && date.moth === this.currentTime.moth && date.day === this
					.currentTime.day) {



					// 选择了今天,但是可预约时间到了第二天
					if (time1 >= 24 * 60) {
						// 日期+1天
						dayEdit()

						// 选择了今天，可预约时间是第二天，并且服务期跨天
						if (this.dateStatus) {

							// 是否在服务期内
							let status = (time1 - 24 * 60) <= (end1)

							this.setTime([
								status ? this.currentTime.hours - 22 : this.startTime[0],
								status ? this.currentTime.minutes : this.startTime[1],
							])
						}

						// 选择了今天，可预约时间是第二天，并且服务期不跨天
						if (!this.dateStatus) {
							// 是否在服务期内
							let status = (time1 - 24 * 60) >= start1 && (time1 - 24 * 60) <= end1

							this.setTime([
								status ? this.currentTime.hours - 22 : this.startTime[0],
								status ? this.currentTime.minutes : this.startTime[1],
							])
						}

					}


					// 选择了今天,可预约时间还是今天
					if (time1 < 24 * 60) {

						// 选择了今天，可预约时间是今天，并且服务期跨天
						if (this.dateStatus) {

							// 是否在服务期内
							let status = true

							// 如果当前小于开始时间
							if (time1 < start1 && time1 > end1) {
								status = false
							}

							this.setTime([
								status ? this.currentTime.hours + 2 : this.startTime[0],
								status ? this.currentTime.minutes : this.startTime[1],
							])
						}

						// 选择了今天，可预约时间是今天，并且服务期不跨天
						if (!this.dateStatus) {
							// 是否在服务期内
							let status = time1 >= start1 && time1 <= (end1)

							if (!status && time1 >= (end1)) {
								// 日期+1天
								dayEdit()
							}

							this.setTime([
								status ? this.currentTime.hours + 2 : this.startTime[0],
								status ? this.currentTime.minutes : this.startTime[1],
							])
						}
					}


				}

				// 选择日期不是今天
				if (!(date.fullYear === this.currentTime.fullYear && date.moth === this.currentTime.moth && date.day ===
						this
						.currentTime.day)) {


					// 是跨天
					if (this.dateStatus) {


						// 如果结束时间不足2小时
						if (end1 < 0) {
							this.setTime([this.startTime[0], this.startTime[1]])
						} else {
							this.setTime([0, 1])
						}
					}

					// 不跨天
					if (!this.dateStatus) {

						this.setTime([this.startTime[0], this.startTime[1]])

					}



				}

				console.log(this.selectDate, '看看每次切换日期');

			},







			/**
			 * 切换时间，校验是否正确
			 */
			timeSwitch(val) {
				/**
				 * 当前时间
				 */
				let time1 = (this.currentTime.hours * 60 + this.currentTime.minutes + 120)

				/**
				 * 当前选中时间
				 */
				let time2 = (Number(this.timeData.split(":")[0]) * 60 + Number(this.timeData.split(":")[1]))

				/*
				 *是否是当天
				 */
				let dateType = this.selectDate.fullYear == this.currentTime.fullYear && this.selectDate.moth == this
					.currentTime.moth && this.selectDate.day == this.currentTime.day

				/**
				 * 开始时间
				 */
				let start1 = (this.startTime[0] * 60 + this.startTime[1])

				/**
				 * 结束时间
				 */
				let end1 = (this.endTime[0] * 60 + this.endTime[1])

				/*
				 *选择时间
				 * */
				let value = val.split(":").map(res => {
					return Number(res)
				})
				/*
				 *选择时间-处理
				 * */
				let value1 = value[0] * 60 + value[1]


				// 如果日期是当天
				if (dateType) {

					console.log('是当天');

					// 如果是跨天
					if (this.dateStatus) {

						console.log('当前切跨天’');
						let status = true

						// 如果选择时间小于选中时间
						if (value1 < time2) {
							status = false
							// 提示框
							this.showToast()
						}

						// 如果选择时间超过结束时间
						if (value1 > end1 + 24 * 60) {
							status = false
							// 提示框
							this.showToast()
						}

						if (status) {
							this.setTime2([value[0], value[1]])
						} else {
							this.setTime2([Number(this.selectDate.hours), Number(this.selectDate.minutes)])
						}

					}

					// 如果不是跨天
					if (!this.dateStatus) {
						console.log('当前不跨天’', time1, time2, value1, end1);

						let status = true
						// 如果选择时间小于选中时间
						if (value1 < time2) {
							status = false
							// 提示框
							this.showToast()
						}

						if (value1 > end1) {
							status = false
							// 提示框
							this.showToast()
						}


						if (status) {
							this.setTime2([value[0], value[1]])
						} else {
							this.setTime2([Number(this.selectDate.hours), Number(this.selectDate.minutes)])
						}


						console.log('如果日期是当天，不跨天', value1, time2);

					}


				}

				// 如果日期不是当天
				if (!dateType) {
					// 是跨天
					if (this.dateStatus) {
						console.log('日期不是当天，且是跨天');
						let status = true
						// 如果选择时间小于选中时间
						if (value1 < time2) {
							status = false
							// 提示框
							this.showToast()
						}
						// 如果选择时间超过结束时间并且小于开始时
						if (value1 > end1 && value1 < start1) {
							status = false
							// 提示框
							this.showToast()
						}

						// 如果是超过当天
						if (value1 > end1 + 24 * 60) {
							status = false
							// 提示框
							this.showToast()
						}



						if (status) {
							this.setTime2([value[0], value[1]])
						} else {
							this.setTime2([Number(this.selectDate.hours), Number(this.selectDate.minutes)])
						}


					}



					// 不是跨天
					if (!this.dateStatus) {

						console.log('日期不是当天，且不是跨天');

						let status = true
						// 如果选择时间小于选中时间

						if (value1 < time2) {
							console.log('k2222k');
							status = false
							// 提示框
							this.showToast()
						}

						// 如果选择时间超过结束时间2小时
						if (value1 > end1) {
							console.log('kk');
							status = false
							// 提示框
							this.showToast()
						}

						if (status) {
							this.setTime2([value[0], value[1]])
						} else {
							this.setTime2([Number(this.selectDate.hours), Number(this.selectDate.minutes)])
						}
					}


				}

			},


			/**
			 * 发送给父组件值
			 */
			submit() {
				this.selectDate = {
					fullYear: this.dateData.split('-')[0],
					moth: this.dateData.split('-')[1],
					day: this.dateData.split('-')[2],
					hours: this.timeData2.split(":")[0],
					minutes: this.timeData2.split(":")[1]
				}
				this.$emit('setTimeData', this.timeJoint(this.selectDate))
			},


		},

		watch: {
			// 时间选择切换
			'selectDate': {
				handler(e) {
					let timeInit = (val) => {
						return val < 10 ? '0' + val : val;
					}
					let time = e.fullYear + '-' + timeInit(e.moth) + '-' + timeInit(e.day) + " " + timeInit(e.hours) +
						":" +
						timeInit(e.minutes) + ":00"
					this.datePickerData = time
					this.timePickerData = timeInit(e.hours) + ":" + timeInit(e.minutes)
				},
				deep: true
			},

			'pageData': {
				handler(e) {
					this.pageData2 = {
						...this.pageData
					}
					this.init() // 格式化
				},
				deep: true
			},
		}
	}
</script>

<style lang="less" scoped>

</style>